{% extends "base.html" %}
{% block body %}


<div id="main" role="main">

	<ol class="breadcrumb">
		<li><a href="{{ url_for('pic.home') }}">Home</a></li>
		<li><a href="{{ url_for('work.home') }}">Work</a></li>
		<li class="active">{{ title }}</li>
	</ol>

	<ul id="tiles">

		<!-- These are our grid blocks -->
		{% for pic in pics %}
		<li>
			<a href="{{url_for('pic.one_pic',uid=pic.id)}}"><img src="{{ url_for('static',filename=pic.url()) }}"  /></a>
			<div class="post-info">
				<div class="post-basic-info">
					<p><span class="fa fa-pencil-square-o"> {{ pic.note }}</span></p>
					<p><span class="fa fa-newspaper-o"> {% for album_info in pic.albums %} <a href="{{url_for('pic.one_album',uid=album_info.id)}}">{{ album_info.name }}</a>{% endfor %}</span></p>
					<p><span class="fa fa-tags">{% for tag_info in pic.tags %} <a href="{{url_for('pic.one_tag',uid=tag_info.id)}}">{{ tag_info.name }}</a>{% endfor %}</span> </p>

					<input type="checkbox" class="pics_chk" name="pics_chk" value="{{pic.id}}">
				</div>
				<div class="clear"> </div>
			</div>
		</li>

		{% endfor %}
		<!-- End of grid blocks -->

		{% for pic in no_db_pic %}
			<li>
				<img src="{{ url_for('static',filename=pic.url) }}" width="200" />
				<div class="post-info">
					<div class="post-basic-info">
						<p>缺少数据库记录</p>
					</div>
					<div class="clear"> </div>
				</div>
			</li>
		{% endfor %}


	</ul>

</div>



{% endblock %}


{% block script %}

<!--wookmark-scripts-->
<script src="{{url_for('static',filename='js/jquery.imagesloaded.js')}}"></script>
<script src="{{url_for('static',filename='js/jquery.wookmark.js')}}"></script>

<script type="text/javascript">

	(function ($){
	var $tiles = $('#tiles'),
		$handler = $('li', $tiles),
		$main = $('#main'),
	    $window = $(window),
	    $document = $(document),
	    options = {
	    //align: 'left',
		autoResize: true, // This will auto-update the layout when the browser window is resized.
		container: $main, // Optional, used for some extra CSS styling
		offset: 10, // Optional, the distance between grid items
		itemWidth:200 // Optional, the width of a grid item
	};
	  /**
	   * Reinitializes the wookmark handler after all images have loaded
	   */
	function applyLayout() {
		$tiles.imagesLoaded(function() {
		  // Destroy the old handler
		  if ($handler.wookmarkInstance) {
			$handler.wookmarkInstance.clear();
		  }

		  // Create a new layout handler.
		  $handler = $('li', $tiles);
		  $handler.wookmark(options);
		});
	}


	  // Call the layout function for the first time
	applyLayout();

	// Capture scroll event.
	$window.bind('scroll.wookmark', onScroll);
	})(jQuery);
 </script>



<!--//wookmark-scripts-->









{% endblock %}